<template>
    <MkDialog ref="dialogRef" title="自编号录入" width="700px" buttons="submit">
        <div>
            <div class="mkScan">
                <div class="scanInpBox">
                    <el-input v-model.trim="scanBarCode" placeholder="请扫描标本条码" class="text" ref="textRef">
                        <template #prefix>
                            <el-icon><ele-FullScreen /></el-icon>
                        </template>
                    </el-input>
                    <el-input v-model.trim="scanBarCode" type="password" class="pass" @keyup.enter="scanCode">
                        <template #prefix>
                            <el-icon><ele-FullScreen /></el-icon>
                        </template>
                    </el-input>
                </div>
                <MkInput class="scanInpBox text pass" label="起始自编号" v-model="seatNo" labelWidth="104px" isEdit />
            </div>
            <div class="table-container">
                <MkTable :data="list">
                    <MkColumn type="selection" width="40" selectable />
                    <MkColumnOption />
                    <MkColumnIndex width="55px" />
                    <MkColumn label="标本号" prop="specimenNo" />
                    <MkColumn label="自编号" prop="seatNo" />
                    <MkColumn label="套餐分组" prop="combolGroup" />
                    <MkColumn label="套餐名字" prop="combolName" />
                </MkTable>
            </div>

        </div>
    </MkDialog>
</template>

<script lang="ts" setup>
//此组件用于标本检验左侧列表，录入自编号按钮弹窗
import { onMounted, ref, Ref } from 'vue'
import { isNull, msg, showError } from '/@/utils';
import { searchForWorkspaceRoot } from 'vite';

defineOptions({
    name: 'InpSpecimentListDialog',
});
interface Detail {
    specimenNo?: string;
    seatNo?: string;
    combolGroup: string;
    combolName: string;
}
const dialogRef = ref();
const list = ref<Detail[]>([])
const seatNo = ref(null)
const currentSeatNo = ref(0)
const detail = {
    specimenNo: undefined,
    seatNo: undefined,
    combolGroup: '测试分组',
    combolName: '测试名字',
}
const open = async (row: any) => {
    console.log('leqaqin')
    dialogRef.value.show();
}

const props = defineProps({
    isBlood: {
        type: Boolean,
        default: true
    },
    placeholder: {
        type: String,
        default: '请扫码'
    }
})


const emits = defineEmits(['getScanInfo'])

const textRef = ref<HTMLElement | null>()
const scanBarCode = ref<string>()
/**
 * 扫码处理
 */
const scanCode = () => {

    if (isNull(scanBarCode.value) || isNull(seatNo.value)) {
        showError('请输入标本号和自编号后重试')
    }

    let tempExit = list.value.find((x) => x.seatNo == seatNo.value || x.specimenNo == scanBarCode.value)


    let temp = JSON.parse(JSON.stringify(detail))
    temp.specimenNo = scanBarCode.value
    temp.seatNo = seatNo.value
    list.value.push(temp)
    // if (!scanBarCode.value) return
    // if (props.isBlood) {
    //     const scanResult = boolMessage(scanBarCode.value)
    //     if (scanResult.type == 'error') {
    //         msg.error(scanResult.message ?? '请扫描正确的条码!');

    //         (textRef.value as any)?.select()
    //         return
    //     }
    //     scanBarCode.value = undefined
    //     emits('getScanInfo', scanResult)
    // } else {
    //     emits('getScanInfo', scanBarCode.value)
    // }

}

const select = () => {
    (textRef.value as any)?.select()
}

const focus = () => {
    (textRef.value as any)?.focus()
}

const clear = () => {
    scanBarCode.value = undefined
}
defineExpose({ open, select, focus, clear })
</script>

<style lang='scss' scoped>
.mkScan {
    display: inline-flex;
    padding: 0px;
    position: relative;

    .iconBox {
        height: 39px;
        line-height: 39px;
        background-color: #fff;
    }

    .scanInpBox {
        position: relative;
        width: 300px;
        height: 39px;
        line-height: 39px;
        padding: 0px 0px 2px 0px;

        .text {
            position: absolute;
            font-size: 20px;
            padding: 2px 10px;
            width: 300px;
            height: 100%;
            ime-mode: disabled;
            color: red;
            font-family: Consolas, Monaco, monospace;
        }

        .pass {
            position: absolute;
            z-index: 2;
            font-size: 20px;
            padding: 2px 10px;
            width: 300px;
            height: 100%;
            border: none;
            ime-mode: disabled;
            background-color: transparent;
            color: transparent;
            caret-color: red;
            font-family: Consolas, Monaco, monospace;
            text-transform: uppercase;

            :deep(.el-input__wrapper) {
                background-color: transparent;
                color: transparent;
            }

            :deep(.el-input__inner) {
                color: transparent;

            }

            ::selection {
                background: rgba(46, 141, 255, 0.8);
                color: transparent;
            }

            ::-moz-selection {
                background: rgba(46, 141, 255, 0.8);
                color: transparent;
            }

            ::-webkit-selection {
                background: rgba(46, 141, 255, 0.8);
                color: transparent;
            }
        }

    }
}

/* 设置表格容器高度，允许滚动 */
.table-container {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #ddd;
    /* 让滚动区域更清晰 */
}
</style>